<template>
  <div class="app-container">
    <!-- 页面主体内容 -->
    <el-card>
      <!-- 搜索表单+新增btn -->
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="标签名称" size="small">
              <el-input v-model="getList.tags" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" size="small">
              <el-select
                v-model="getList.province"
                placeholder="请选择"
                @change="getArea($event)"
              >
                <!-- 直接遍历使用外部引入的状态 -->
                <el-option
                  v-for="item in cityList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地区" size="small">
              <el-select v-model="getList.city" placeholder="请选择">
                <!-- 直接遍历使用外部引入的状态 -->
                <el-option
                  v-for="item in areaList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" size="small">
              <el-input v-model="getList.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" size="small">
              <el-select v-model="getList.state" placeholder="请选择">
                <!-- 直接遍历使用外部引入的状态 -->
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding-left: 40px">
            <!-- 表单按钮 -->
            <el-button size="small" @click="clickClear">清除</el-button>
            <el-button size="small" type="primary" @click="clickSearch"
              >搜索</el-button
            >
          </el-col>
          <!-- 右侧按钮 -->
          <el-col :span="12" style="text-align: right">
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              @click="(showHide = true), (title = '创建用户')"
              >新增用户</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- alert消息提示 -->
      <el-alert
        :closable="false"
        :title="'共 ' + companysList.counts + ' 条记录'"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- table表格 -->
      <el-table
        :highlight-current-row="true"
        :header-cell-style="color"
        :data="companysList.items"
      >
        <el-table-column
          prop="id"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="number"
          align="center"
          label="企业编号"
        ></el-table-column>
        <el-table-column
          prop="shortName"
          align="center"
          label="企业简称"
        ></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column
          prop="creatorID"
          align="center"
          label="创建者"
        ></el-table-column>
        <el-table-column prop="addDate" align="center" label="创建日期">
          <template #default="{ row }">
            <!-- 过滤器用法  前面变量  后面过滤器名称 -->
            <span>{{ row.addDate | dateformat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remarks"
          align="center"
          label="备注"
        ></el-table-column>
        <el-table-column
          prop="state"
          align="center"
          label="状态"
          :formatter="zt"
        ></el-table-column>
        <el-table-column align="center" width="180" label="操作">
          <template #default="{ row }">
            <el-button
              circle
              plain
              type="primary"
              icon="el-icon-edit"
              @click="clickChange(row)"
            ></el-button>
            <el-tooltip
              class="item"
              effect="dark"
              :content="row.state === 0 ? '启用' : '禁用'"
              placement="top"
            >
              <el-button
                circle
                plain
                :type="row.state === 0 ? 'success' : 'warning'"
                :icon="row.state === 0 ? 'el-icon-check' : 'el-icon-close'"
                @click="clickState(row)"
              ></el-button>
            </el-tooltip>
            <!-- <el-button circle plain type="warning" icon="el-icon-close"></el-button> -->
            <el-button
              circle
              plain
              type="danger"
              icon="el-icon-delete"
              @click="clickDel(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <PaginationCpt
        :counts="companysList.counts"
        :pagesize="getList.pagesize"
        @SizeChange="handleSizeChange"
        @CurrentChange="handleCurrentChange"
      ></PaginationCpt>
    </el-card>
    <!-- 页面弹框dialog -->
    <el-dialog
      :title="title"
      :visible.sync="showHide"
      width="50%"
      @close="handleClose"
    >
      <el-form label-width="150px" :model="form" :rules="rules" ref="formRef">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="form.company"></el-input>
          <p>https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <el-form-item label="城市地区" prop="province">
          <el-select
            v-model="form.province"
            placeholder="请选择"
            @change="getArea($event)"
            style="width: 48%; margin-right: 2%"
          >
            <!-- 直接遍历使用外部引入的状态 -->
            <el-option
              v-for="item in cityList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="form.city"
            placeholder="请选择"
            style="width: 50%"
          >
            <!-- 直接遍历使用外部引入的状态 -->
            <el-option
              v-for="item in areaList2"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="form.tags"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            placeholder="请输入"
            v-model="form.remarks"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- dialog内部按钮 -->
      <div slot="footer" style="text-align: center">
        <el-button @click="showHide = false">取 消</el-button>
        <el-button type="primary" @click="clickConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入组件?
import PaginationCpt from "./qy_cpt/pagination_cpt.vue";
// 引入城市 地区
import { provinces, citys } from "@/api/hmmm/citys";
// 引入通用状态选择
import { status } from "@/api/hmmm/constants";
// 引入封装的Ajax请求
import { list, add, update, disabled, remove } from "@/api/hmmm/companys";
export default {
  components: {
    PaginationCpt,
  },
  data() {
    return {
      title: "",
      showHide: false,
      color: {
        // 表格表头样式
        "background-color": "#fafafa",
        "border-bottom": "2px solid #e8e8e8",
      },
      status, // 引入的数据存到data中就可以在模板中直接使用
      cityList: null, // 城市列表
      areaList: null, // 地区列表
      areaList2: null, // 地区列表
      getList: {
        // 获取企业管理列表请求体  搜索
        page: 1,
        pagesize: 10,
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null,
      },
      companysList: {}, // 企业列表数据
      form: {
        // dialog form表单数据  也是新增编辑请求体
        id: null,
        number: null,
        isFamous: true, // 是否名企 表单没有 默认给true
        shortName: null, // 企业简称
        company: null, // 所属公司
        province: null, // 省份
        city: null, // 城市
        tags: null, // 标签
        remarks: null, // 备注
      },
      rules: {
        // 表单校验规则
        shortName: [
          { required: true, message: "企业简称不能为空", trigger: "blur" },
        ],
        company: [
          { required: true, message: "所属公司不能为空", trigger: "blur" },
        ],
        province: [{ required: true, message: "请选择省份", trigger: "blur" }],
        tags: [{ required: true, message: "请输入标签", trigger: "blur" }],
        remarks: [{ required: true, message: "备注不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 渲染状态格式化内容  elui组件自带的
    zt(row) {
      const obj = status.find((item) => item.value === row.state);
      if (obj) {
        return obj.label;
      } else {
        return "未知";
      }
    },
    // 获取所有城市列表
    getAllCity() {
      this.cityList = provinces();
    },
    // 获取对应下级地区
    getArea(city) {
      // 因为两个复用 所以数据需要分开 ex
      // console.log(city)
      if (this.showHide) {
        this.areaList2 = citys(city);
        this.form.city = this.areaList2[0];
      } else {
        this.areaList = citys(city);
        this.getList.city = this.areaList[0];
      }
    },
    // 分页组件事件
    handleSizeChange(n) {
      this.getList.pagesize = n;
      this.getCompanysList();
    },
    // 分页组件事件
    handleCurrentChange(m) {
      this.getList.page = m;
      this.getCompanysList();
    },
    // 封装获取企业列表请求
    async getCompanysList() {
      const res = await list(this.getList);
      console.log(res);
      this.companysList = res.data;
    },
    // 点击搜索按钮
    clickSearch() {
      this.getCompanysList();
    },
    // 点击清除按钮
    clickClear() {
      this.getList = {
        // 获取企业管理列表请求体  搜索
        page: 1,
        pagesize: 10,
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null,
      };
    },
    // dialog消失事件 清空校验警告 清空表单
    async handleClose() {
      await this.$refs.formRef.resetFields();
      this.form = {
        // dialog form表单数据  也是新增编辑请求体
        id: null,
        isFamous: true, // 是否名企 表单没有 默认给true
        shortName: null, // 企业简称
        company: null, // 所属公司
        province: null, // 省份
        city: null, // 城市
        tags: null, // 标签
        remarks: null, // 备注
      };
    },
    // 点击dialog确定事件 发送请求 还要判断是新增还是编辑
    async clickConfirm() {
      try {
        await this.$refs.formRef.validate();
        if (this.title === "创建用户") {
          await add(this.form);
        } else {
          await update(this.form);
        }
        this.showHide = false;
        this.getCompanysList();
      } catch (error) {
        console.log(error);
      }
    },
    // 点击编辑按钮
    clickChange(row) {
      console.log(row);
      this.title = "编辑用户";
      // 数据回显  ex
      this.form.id = row.id;
      this.form.number = row.number;
      this.form.shortName = row.shortName;
      this.form.company = row.company;
      this.form.province = row.province;
      this.form.city = row.city;
      this.form.tags = row.tags;
      this.form.remarks = row.remarks;
      // 显示dialog
      this.showHide = true;
    },
    // 点击状态操作 发送修改状态请求
    async clickState(row) {
      console.log(row.state);
      const tet = row.state === 0 ? "启用" : "禁用";
      console.log(tet);
      try {
        await this.$confirm(`已成功${tet}, 是否继续?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        const data = {
          id: row.id,
          state: row.state === 0 ? (row.state = 1) : (row.state = 0),
        };
        await disabled(data);
        this.$message({
          type: "success",
          message: `已成功${tet}`,
        });
      } catch (error) {
        this.$message({
          type: "info",
          message: "已取消操作！",
        });
      }

      await this.getCompanysList();
    },
    // 点击删除按钮
    async clickDel(row) {
      // console.log(row)
      this.form.id = row.id;
      try {
        await this.$confirm("此操作将永久删除用户 , 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        await remove(this.form);
        this.$message({
          type: "success",
          message: "成功删除了用户！",
        });
      } catch (error) {
        this.$message({
          type: "info",
          message: "已取消操作！",
        });
      }
      this.getCompanysList();
    },
  },
  created() {
    this.getAllCity();
    this.getCompanysList();
  },
};
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  .el-form {
    .el-select {
      width: 100%;
    }
  }
}
.el-dialog {
  .el-form {
    width: 80%;
    margin-left: 10px;
  }
}
// alert提示框下边距
.el-alert {
  margin-bottom: 20px;
}
</style>
